<template>
	<view class="container">
		<view  style="padding: 40rpx;">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms class="form" ref="baseForm" :modelValue="activeForm" label-position="left" labelWidth="100px">
				<uni-forms-item label="活动标题" required>
					<uni-easyinput v-model="activeForm.activityTitle" placeholder="请输入活动标题" />
				</uni-forms-item>
				<uni-forms-item label="活动执行人" required>
					<zxz-uni-data-select v-model="activeForm.teacherId" filterable :localdata="teacherList"
												@inputChange="inputChange" @change="change" />
				</uni-forms-item>
				<uni-forms-item label="执行日期" required>
					<uni-datetime-picker type="date" return-type="timestamp" v-model="activeForm.activityDate"/>
				</uni-forms-item>
				<uni-forms-item label="活动说明" required>
					<uni-easyinput type="textarea" v-model="activeForm.activityContent" placeholder="请输入活动说明" />
				</uni-forms-item>
				<uni-forms-item label="活动质量" required>
					<zxz-uni-data-select v-model="activeForm.activityQuality" filterable :localdata="qualities"
												@inputChange="inputChange" @change="change" />
				</uni-forms-item>
				<uni-forms-item label="活动照片" required>
					<uni-file-picker limit="9" v-model="photoList" @select="selectPhoto" @delete="delPhoto"/>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom-style">
			<view class="button-xiugai"  @click="updateActivity">修 改</view>
			<view class="buttom-cancel" @click="cancelUpdate">取 消</view>
		</view>
	</view>
</template>

<script>
	import activity from '@/api/modules/activity';
	export default {
		data() {
			return {
				activityId: '',
				activeForm: {},
				qualities: [{
							"value": 1,
							"text": "正常",
						},
						{
							"value": 2,
							"text": "不展开"
						},
						{
							"value": 3,
							"text": "无质量展开"
						},
						],
				teacherList: []	,
				photoList: []
			}
		},
		onLoad(options) {
			this.activityId = options.activityId;
			activity.getClassTeacher().then(resp => {
				console.log(resp.data)
				if(resp.data !== null) {
					this.teacherList = [
						...resp.data.map(item => {
							let obj = {}
							obj.text = item.username
							obj.value = item.id
							return obj;
						})
					]
				}
				console.log(this.teacherList)
			})
			// 根据Id查看活动详情
			this.getActivityById();
			
		},
		methods: {
			getActivityById() {
				activity.getActivityById(this.activityId).then(resp => {
					console.log(resp.data)
					this.activeForm = resp.data
					let photos = resp.data.activityPhotos.split(",");
					//照片赋值
					this.photoList = photos.map(item => ({  
						url: item,  
						extname: '',  
						name: ''  
					}));
				})
			},
			inputChange(e) {
			},
			change(e) {
			},
			cancelUpdate() {
				// 返回上一个页面
				uni.navigateBack({
					delta: 1
				});
			},
			updateActivity() {
				console.log(this.activeForm)
				if (!this.activeForm.activityTitle) {
					uni.showToast({
						title: "请填写活动标题",
						icon: 'none',
					})
					return
				}
				if (!this.activeForm.teacherId) {
					uni.showToast({
						title: "请选择活动执行人",
						icon: 'none',
					})
					return
				}
				if (!this.activeForm.activityDate) {
					uni.showToast({
						title: "请选择执行日期",
						icon: 'none',
					})
					return
				}
				if (!this.activeForm.activityContent) {
					uni.showToast({
						title: "请输入活动说明",
						icon: 'none',
					})
					return
				}
				console.log(this.activeForm.activityQuality)
				if (!this.activeForm.activityQuality) {
					uni.showToast({
						title: "请选择活动质量",
						icon: 'none',
					})
					return
				}
				console.log(this.photoList.length)
				if (this.photoList.length === 0) {
					uni.showToast({
						title: "请选择活动照片",
						icon: 'none',
					})
					return
				}
				let photoUrlList = []
				this.photoList.forEach(item => {
					photoUrlList.push(item.url)
				})
				this.activeForm.photos = photoUrlList
				uni.showLoading({
					mask: true,
					title: '修改中'
				});
				// 提交活动
				activity.createOrUpdateActivity(this.activeForm).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: "修改成功",
							icon: 'none',
						})
						uni.navigateBack({
							delta: 1
						});
				
					}
				}).catch(err => {
					this.reset()
					uni.hideLoading()
					uni.showToast({
						title: err.data.message,
						icon: 'none',
					})
				})
				
			},
			selectPhoto(e) {
			   console.log('选择图片：', e)
			   e.tempFiles.forEach(tempFile => {
				   uni.uploadFile({
				     url: uni.url + 'classroom/hygiene/uploadHygienePhoto',
				     filePath: tempFile.url,
				     // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
				     name: 'file',
				     header: {
				       'Authorization': "Bearer " + uni.getStorageSync("token")
				     },
				     // 成功函数
				     success: (res) => {
						console.log('上传成功', res.data);
						var obj = JSON.parse(res.data);
						this.photoList.push({
							url: obj.data,
							extname: '',  
							uuid: tempFile.uuid 
						})
						console.log(this.photoList);
				     },
				     // 失败提示用户重新上传
				     fail: error => {
				       console.log('上传失败', error);
				     }
				    })
			   })
			 },
			 delPhoto(e) {
				 console.log("删除图片",e);
				 this.photoList = this.photoList.filter(item => item.url !== e.tempFile.url)
				 // if(e.tempFile.name !== '') {
					//  this.delPhotoIds.push(e.tempFile.name);
				 // }
				 
				 console.log(this.photoList)
			 },
		}
	}
</script>

<style>
.bottom-style {
		display: flex;
		/* margin-top: 100rpx; */
		justify-content: space-around;
		position: fixed; /* 使用固定定位 */
		left: 0; /* 距离左边0 */
		right: 0; /* 距离右边0 */
		bottom: 0; /* 距离底部0 */
		width: 100%; /* 宽度100% */
	}
	.button {
		width: 100%;
		background-color: #ffffff;
		color: #787878;
		/* padding: 20rpx; */
		border-radius: 10rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 0 auto;
		border: 1px solid gray;
	}
	.button-xiugai {
		width: 35%;
		background-color: #ff009a;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
	.buttom-cancel {
		width: 35%;
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
</style>
